<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload New File</title>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/bootstrap.min.css') }}">
    <script src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
    <style>
        .custom-file-input {
            margin-top: 10px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-3">Add Digital Watermarking</h1>
        <form action="/" method="POST" enctype="multipart/form-data">
            <div class="mb-3">
                <label for="file" class="form-label h2">Choose picture</label>
                <input type="file" class="form-control custom-file-input" name="file" required>
            </div>
            <div class="mb-4">
                <label for="file_mask" class="form-label h2">Choose Watermarking</label>
                <input type="file" class="form-control custom-file-input" name="file_mask" required>
            </div>
            <button type="submit" class="btn btn-primary btn-lg">Handle</button>
        </form>
        <a href="test" class="btn btn-link mt-2">Test Watermarking</a>
        <div class="mt-3">
            <img src="{{ url_for('static', filename='output.png') }}" alt="Watermarked Image" class="img-fluid">
        </div>
    </div>
    <script src="{{ url_for('static',filename='js/bootstrap.bundle.min.js') }}"></script>
</body>
</html>